<template>
  <!--  配置版本管理-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.queryString" clearable placeholder="请输入客户姓名/电话">
        <template slot="prepend">客户信息</template>
      </el-input>
      <el-select v-model="form.visitStatus" style="width: 150px;" clearable placeholder="拜访状态">
        <el-option
          v-for="item in EnumVisitStatusList"
          :key="item.code"
          :label="item.name"
          :disabled="item.code === 0"
          :value="item.code">
        </el-option>
      </el-select>
      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="customName" label="客户姓名" width="120"></el-table-column>
        <el-table-column prop="customPhone" label="客户电话" width="130"></el-table-column>
        <el-table-column prop="visitTime" label="拜访日期" width="120">
          <template slot-scope="scope">{{scope.row.visitTime | formatTimer2}}</template>
        </el-table-column>
        <el-table-column prop="visitAddress" label="拜访地点" min-width="100"></el-table-column>
        <el-table-column prop="explanation" label="拜访结果" min-width="160"></el-table-column>
        <el-table-column prop="visitStatusName" label="拜访状态" width="120">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.visitStatus | gradeVisitStatusColor" style="color: white">
              {{scope.row.visitStatusName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="productVolume" label="演示产品总价" width="120"></el-table-column>
        <el-table-column prop="userName" label="拜访人" min-width="120"></el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <button class="btn_add" v-if="scope.row.visitStatus === 2" @click="handleComplete(scope.row,true)">查看详情
            </button>
            <button class="btn_edit" v-if="scope.row.visitStatus === 1" @click="handleComplete(scope.row,false)">完成拜访
            </button>
            <el-popconfirm title="确定取消拜访吗？" v-if="scope.row.visitStatus === 1" style="margin-right: 16px"
                           @confirm="handleCancel(scope.row)">
              <button class="btn_delete" slot="reference">取消拜访</button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize"       :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     layout="sizes, prev, pager, next" :total="form.total">
      </el-pagination>

      <el-dialog title="拜访结果填写" :visible.sync="isShowVisitDialog" :close-on-click-modal="false" width="600px">
        <el-form label-position="right" ref="visit" label-suffix="：" :rules="visitRule" :model="visit"
                 label-width="0px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="customerName">
                <el-input v-model="visit.customName" size="mini" disabled>
                  <template slot="prepend">客户姓名</template>
                </el-input>
              </el-form-item>
              <el-form-item prop="dept">
                <el-input v-model="visit.dept" size="mini" disabled placeholder="---">
                  <template slot="prepend">所在部门</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="companyName">
                <el-input v-model="visit.companyName" size="mini" disabled placeholder="---">
                  <template slot="prepend">所在单位</template>
                </el-input>
              </el-form-item>
              <el-form-item prop="duties">
                <el-input v-model="visit.duties" size="mini" disabled placeholder="---">
                  <template slot="prepend">担任职位</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="visitTime" label="拜访时间" label-width="100px">
            <el-date-picker
              disabled
              v-model="visit.visitTime"
              type="date"
              style="width: 100%;"
              placeholder="选择拜访日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="visitAddress" label="拜访地点" label-width="100px">
            <el-input v-model="visit.visitAddress" disabled clearable placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item prop="product" label="演示产品" label-width="100px">
            <el-select v-model="visit.product" disabled multiple filterable placeholder="请选择演示产品(支持多选)">
              <el-option
                v-for="item in productList"
                :key="item.id"
                :label="item.name + '(￥' +item.price+')'"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="productVolume" label="产品总价" label-width="100px">
            <el-input v-model="visit.productVolume" disabled placeholder="自动计算">
            </el-input>
          </el-form-item>
          <el-form-item prop="explanation" label="拜访结果" label-width="100px">
            <el-input v-model="visit.explanation" type="textarea" :disabled="visit.isLook"
                      :autosize="{ minRows: 3, maxRows: 5}"
                      placeholder="请输入本次拜访的结果"></el-input>
          </el-form-item>
        </el-form>
        <!-- 操作按钮 -->
        <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="isShowVisitDialog = false">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateVisitForm">确定</el-button>
      </span>
      </el-dialog>
    </div>

    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>
<script>
import {
  getVisitList,
  updateVisitStatus,
  getProductSelectList
} from '@/services/ERP/sale'
import ItemMixins from "../item.mixins";
import XLoading from '@/components/animation/x-loading.vue'
import Enums from '@/utils/enums'

// form表单校验规则
export default {
  components: {XLoading},
  mixins: [ItemMixins,Enums],
  data() {
    return {
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      supplier: {},
      tableList: [],
      productList: [],
      EnumVisitStatusList: [],
      isShowVisitDialog: false,
      isLoading: false,
      visit: {},
      visitRule: {
        explanation: {required: true, message: '请输入拜访结果'},
      },
    }
  },

  methods: {
    handleCancel() {

    },
    // 获取演示产品选项
    async getProductSelectList() {
      let res = await getProductSelectList()
      this.productList = res.data || []
    },
    // 表单提交
    validateVisitForm() {
      if (this.visit.isLook) {
        this.isShowVisitDialog = false
        return
      }
      this.$refs.visit.validate((valid) => {
        if (valid) {
          this.submitVisit()
        }
      })
    },
    async submitVisit() {
      let res = await updateVisitStatus(this.visit)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '更新成功！'
        })

        this.queryList()
      }
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    async queryList() {
      this.isLoading = true
      let res = await getVisitList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
      this.isLoading = false
    },
    handleComplete(row, look) {
      this.isShowVisitDialog = true
      this.visit = JSON.parse(JSON.stringify(row))
      this.visit.visitId = row.id
      this.visit.visitStatus = 2
      this.visit.isLook = look
      this.$nextTick(() => {
        this.$refs.visit.clearValidate()
      })
    },
  },
  mounted() {
    this.queryList()
    this.queryDictList(['EnumVisitStatus'], ['EnumVisitStatusList'])
  },
  activated() {
    this.getProductSelectList()
  }

}
</script>

<style lang="less" scoped>
  .el-divider__text {
    font-size: 20px;
  }

  /deep/ .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 30px 0;
  }

  /deep/ .el-input-group__prepend {
    border-right: 0;
    background: #2196f3;
    color: white;
  }
</style>
